<template>
  <Paglist v-model="dataList" :is-init-api="false" :parame="parame" @register="register">
    <template v-for="v in dataList" :key="v.id">
      <GmatItem
        :avatar="v.avatar"
        :user-name="v.name"
        :company-position="v.companyPositionName"
        :approval-status="v.approvalStatus"
        @click="toApply(v)"
      />
    </template>
  </Paglist>
  <TButtonGroup position="fixed">
    <TButton
      text="添加报名人员"
      type="primary"
      :customStyle="{ width: 'calc(100vw - 60rpx)' }"
      @click="addRetinue"
    />
  </TButtonGroup>
</template>

<script setup lang="ts">
  import GmatItem from './GmatItem.vue';
  import Paglist from '@/components/Paglist/index.vue';
  import { useConList } from '@/components/Paglist/useConList';
  import { provide, reactive, ref, watchEffect } from 'vue';
  import { retinueList } from '@/api/activity';
  import { type IAppRegistrationData, type RetinueListResult } from '@/api/activity/types';
  import { propTypes } from '@/utils/propTypes';
  import { navigateTo } from '@/router';
  import TButtonGroup from '@/components/TButtonGroup/index.vue';
  import TButton from '@/components/TButtonGroup/TButton.vue';
import { Toast } from '@/utils';

  const dataList = ref<RetinueListResult[]>([]);
  const parame = reactive<IAppRegistrationData>({
    current: 1,
    size: 10,
    activityId: 0,
  });

  const props = defineProps({
    activityId: propTypes.number,
    memberOpen: propTypes.number,
  });

  const stop = watchEffect(() => {
    const id = props.activityId;
    if (id) {
      parame.activityId = id;
      refresh?.();
      stop();
    }
  });

  provide('api', retinueList);

  const [register, { refresh }] = useConList();

  function toApply(item: RetinueListResult) {
    if (!props.memberOpen) {
      return Toast('该活动只允许会员参加')
    }
    navigateTo({
      name: 'signUpInfoConfirm',
      options: {
        activityId: parame.activityId,
        registerType: 'agent',
        applicantInfo: {
          phonenumber: item.phone,
          userName: item.name,
          companyPosition: item.companyPositionName,
          companyName: item.companyName,
          retinueId: item.id,
        },
        success: () => {
          refresh?.();
        },
      },
    });
  }

  function addRetinue() {
    navigateTo({
      name: 'addRetinue',
      options: {
        callback: () => refresh?.(),
      },
    });
  }
</script>

<style scoped></style>
